{% extends "base.html" %}
{% load i18n %}
{% load promgen %}
{% block content %}

<div class="page-header" v-pre>
  <h1>Project: {{ project.name }}</h1>
</div>

{% breadcrumb project 'Register Exporter' %}

<div class="row">

<form id="exporter_form" action="{% url 'project-exporter' project.id %}" method="post">{% csrf_token %}
  <div class="col-md-8">
    <div class="panel panel-default">
      <div class="panel-heading">Exporter</div>
        <div class="panel-body">
          <p class="help-text">
            See the Prometheus documentation for additional information regarding
            <a rel="noopener noreferrer" href="https://prometheus.io/docs/concepts/jobs_instances/">job names</a>
          </p>
          <p class="help-text">
            Generally a job name should describe the component being monitored. For exporters, the <strong>-exporter</strong>
            should be dropped, so <strong>node_exporter</strong> becomes just <strong class="text-success">node</strong> or <strong>jmx_exporter</strong> becomes <strong class="text-success">jmx</strong>
          </p>
          <p class="help-text">
            When using something such as micrometer which supports prometheus, the job name should be <strong class="text-success">micrometer</strong>, not <strong class="text-warning">micrometer-prometheus</strong>
          </p>
          <p class="help-text">
            If there are no other job names that make sense, <strong class="text-success">app</strong> can be used as a general substitute
          </p>
        </div>
        <table class="table" v-pre>
          {{ form.as_table }}
        </table>
        <div class="panel-footer">
          <div class="input-group-btn">
            <button class="btn btn-primary">Register Exporter</button>
            <exporter-test class="btn btn-info" href="{% url 'exporter-scrape' project.id %}">
              {% trans "Test" %}
            </exporter-test>
          </div>
        </div>
      </div>
    </div>
  </form>

  <div class="col-md-4">
    <div class="panel panel-default">
      <div class="panel-heading">Presets</div>
      <div class="panel-body">
{% for default in DEFAULT_EXPORTERS %}
      <form id="{{default.job}}_{{default.port}}" class="form-inline" action="{% url 'project-exporter' project.id %}" method="post">
          {% csrf_token %}
          <input type="hidden" name="job" value="{{ default.job }}" />
          <input type="hidden" name="port" value="{{ default.port }}" />
          <input type="hidden" name="path" value="{{ default.path }}" />
          <input type="hidden" name="scheme" value="{{ default.scheme }}" />
          <input type="hidden" name="enabled" value="1" />
          <div class="input-group-btn">
            <button style="width:80%" class="btn btn-primary" v-pre>Register {{ default.job }} :{{ default.port }}{{ default.path }}</button>
            <exporter-test class="btn btn-info" href="{% url 'exporter-scrape' project.id %}">
              {% trans "Test" %}
            </exporter-test>
          </div>
        </form>
        {% endfor %}
      </div>
    </div>
  </div>
</div>

<div>
  <exporter-result />
</div>

{% endblock %}
